@mixin theme(
  // 主题名称
    $theme: default,
  // 主色调（一级菜单背景色，登录界面背景色）
    $menuBg: #303a4b,
  // 一级菜单悬停时高亮色
    $menuHover: #263445,
  // 二级菜单背景色
    $subMenuBg: #1f2d3d,
  // 二级菜单悬停时高亮色
    $subMenuHover: #001528,
  // 菜单文字颜色
    $menuText: #bfcbd9,
  // 菜单激活时文字颜色
    $menuActiveText: #508aff,
  // 菜单激活时父级文字颜色
    $subMenuActiveText: #f4f4f5,
  // 激活标志颜色
    $activeColor: #508aff
) {
  // loginPage
  .login-container {
    background-color: $menuBg !important;

    .login-form {
      color: $subMenuActiveText !important;
    }

    .el-input {
      input {
        color: $subMenuActiveText !important;
        caret-color: $subMenuActiveText !important;
      }
    }

    @if ($theme==light) {
      .selection-container {
        .selection {
          &:hover {
            background: rgba(55, 55, 55, 0.3) !important;
          }
        }
      }
    }
  }

  // siderbar && navbar
  .sidebar-container,
  .navbar-container {
    background-color: $menuBg !important;

    & .nest-menu .el-sub-menu > .el-sub-menu__title,
    & .el-sub-menu .el-menu-item {
      color: $menuText !important;
      background-color: $subMenuBg !important;
      border-left: 0 solid $activeColor !important;

      &:hover {
        background-color: $subMenuHover !important;
      }
    }
    & .el-sub-menu .el-menu-item.is-active {
      border-left: 5px solid $activeColor !important;
    }

    .submenu-title-noDropdown,
    .el-sub-menu__title,
    .el-menu-item {
      color: $menuText !important;
      background-color: $menuBg !important;
      &:hover {
        background-color: $menuHover !important;
      }
    }

    .is-active > .el-sub-menu__title {
      color: $subMenuActiveText !important;
    }

    .el-menu-item.is-active {
      color: $menuActiveText !important;
    }
  }

  .sidebar-container {
    @if ($theme==light) {
      border-right: 1px solid #d8dce5 !important;
    }

    .sidebar-logo-container {
      background-color: $menuBg !important;
      .sidebar-title {
        color: $menuText !important;
      }
    }
  }

  .navbar-container {
    @if ($theme==light) {
      border-bottom: 1px solid #d8dce5 !important;
    }
  }

  // tagsView
  .tags-view-container {
    .tags-view-item {
      &::after {
        background-color: $activeColor !important;
      }
    }
  }

  // popMenu
  > .el-menu--vertical,
  > .el-menu--horizontal {
    .el-menu {
      background-color: $subMenuBg !important;
    }

    .nest-menu .el-sub-menu > .el-sub-menu__title,
    .el-menu-item {
      color: $menuText !important;
      background-color: $subMenuBg !important;

      &:hover {
        background-color: $subMenuHover !important;
      }
    }

    .is-active.el-menu-item {
      color: $menuActiveText !important;
    }
  }
}

/* theme: default */
.default,
.default ~ .el-popper {
  @include theme();
}
.default.theme-selection {
  background-color: rgba(48, 65, 86, 0.6);
}

/* theme: light */
.light,
.light ~ .el-popper {
  @include theme(
    light,
    #fafafa,
    #e6e6e6,
    #f0f0f0,
    #e1e1e1,
    #707276,
    #508aff,
    #495060,
    #508aff
  );
}
.light.theme-selection {
  background-color: rgba(230, 230, 230, 1);
}

/* theme: dark */
.dark,
.dark ~ .el-popper {
  @include theme(
    dark,
    #292732,
    #53525a,
    #3d3b46,
    #5b5a62,
    #bfcbd9,
    #508aff,
    #f4f4f5,
    #508aff
  );
}
.dark.theme-selection {
  background-color: rgba(41, 39, 50, 0.7);
}
